<template>
  <div class="index">
    <div class="index_top">
      <swiper style="flex: 1"></swiper>
      <div class="acrid">
        <h3 class="widget_titx">
          <strong>热门推荐</strong>
        </h3>
        <ul>
          <li v-for="(item,i) in randList" :key="i" class="item1">
            <div class="fc" style="width: 130px;justify-content: normal">
              <span class="label label-1">{{ i + 1 }}</span>
              <a :href="'/details/'+item.id">{{ item.title }}</a>
            </div>
            <div class="fc">
              <span class="prv">
                <i class="glyphicon glyphicon-eye-open"></i>
                阅读（47）
              </span>
              <span class="data">[{{ item.add_time | dateFormat }}]</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <List v-for="(item,index) in list" :key="index" :list="item"/>
    <!--    // 分页-->
    <div class="pages">
            <Page :total="page.count" :page-size="page.pageSize" show-total @on-change="PageChange" />
    </div>
  </div>
</template>

<script>
import swiper from "../components/swiper";
import List from "../components/list";

export default {
  components: {
    List,
    swiper
  },
  data() {
    return {
      currentPage: 5,
      list: "",
      page: {
        pageSize: 5, // 一页显示多少条
        page: 0, // 当前在第几页
        count: 10 // 总条数
      },
      randList: []
    };
  },
  created() {
    this.$axios
      .$get(`/api/web/article?page=${this.page.page}&pageSize=${this.page.pageSize}`)
      .then(con => {
        this.list = con.data;
        this.page = con.page;
      });

    // 获取随机推荐文章
    this.$axios.$get(`/api/web/article/getTen`).then(con => {
      this.randList = con.data
    })

  },
  // 过滤器
  filters: {
    dateFormat(msg) {
      if (msg == 0) {
        return "2020/12/30"
      } else {

        return new Date(parseInt(msg) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ').split(" ")[0];

      }
    }
  },
  methods: {

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    PageChange(con) {
      this.page.page = con;
      this.$axios
        .$get(`/api/web/article/?page=${this.page.page}&pageSize=${this.page.pageSize}`)
        .then(con => {
          this.list = con.data;
          this.page = con.page;
        });
      console.log(`当前是第${con}页数`);
    },
    add() {
      this.$store.commit("setToken", "2123");
      console.log(this.$store.state);
    },
    adds() {
      this.$store.commit("api/adduser", "2123");
    }
  }
}
</script>

<style lang="less">

.index {
  min-height: 900px;
}

.acrid {
  width: 300px;
  padding: 0 20px;
  overflow: hidden;
  margin-top: 20px;
  height: 316px;
  background-color: #fff;
}

.prv {
  float: right;
  margin-right: 15px;
  color: #999;
}

.data {
  color: #999999;
  float: right;
  line-height: 1.4em;
  right: 0;
}

.label {
  position: relative;
  display: inline-block;
  padding: 5px 7px 4px;
  font-size: 10.15px;
  line-height: 14px;
  color: #fff;
  vertical-align: baseline;
  white-space: nowrap;
  background-color: #999;
  margin-right: 8px;
  padding: 2px 7px;
}

.item1 {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  clear: both;
  height: 20px;
  margin-bottom: 9px;
}

.widget_titx {
  height: 25px;
  font-size: 14px;
  border-bottom: solid 1px #e6e6e6;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

.index_top {
  display: flex;
}

.vuex {
  border: 1px solid #cccccc;
  margin: 30px;
}

.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

// 最大 768px
@media (max-width: 768px) {
  .index_top {
    display: block;
  }

  .acrid {
    width: 100%;
  }
}

// 最小 768px  到  最大 922px
@media (min-width: 768px) and (max-width: 992px) {
  .index_top {
    /*display: block;*/
  }

  .acrid {
    width: 100%;
  }
}

// 最小 992px   到 最大 1200px
@media (min-width: 992px) and (max-width: 1200px) {
}

// 最小1200px
@media (min-width: 1200px) {
}

.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand',
  'Source Sans Pro',
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial,
  sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
